Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #22: UI Enhancements and TailwindCSS Styling Adjustments #63

Merged
merged 10 commits into from
Oct 15, 2024
Merged

Issue #22: UI Enhancements and TailwindCSS Styling Adjustments #63

merged 10 commits into from
Oct 15, 2024

Conversation

shuveksha-tuladhar
Copy link
Collaborator

Description

This PR addresses UI adjustments and improvements to the app's styling using TailwindCSS.

  • Implement useContext to pass light and dark theme.
  • Ensure the disclosure component resizes correctly to prevent content overflow on smaller screen sizes.
  • Style the navbar buttons to visually highlight the active page
  • Enhanced styling to the following components:
    • ListItem
    • SingleList
    • Toggle
    • Disclosure
    • Layout
  • Relocated the "Share" button inside the disclosure component.
  • Styled the search bar within item lists.
  • Removed SingleList component for not being used.
  • Added gradient color to List Name disclosure.
  • Implemented animation on slideup and slidedown for disclosure.

Related Issue

Type of Changes

bug fix
enhancement
refactoring

shuveksha-tuladhar and others added 10 commits October 12, 2024 23:58
@shuveksha-tuladhar
style: Implement TailwindCSS on Toggle component
db0819f
@shuveksha-tuladhar
style: Update darkmode text color for AddItem page
425f1f5
@shuveksha-tuladhar
Remove unsed SingleList component and css
9721452
@NickRoccodev11
Work in progress: apply urgency colors to list items, change list dis…
25ab5f2 
…play
@shuveksha-tuladhar
Implement useContext to pass light and dark theme, tailwindCSS for Li…
c4ee6b9 
…stItem, reformat Listname and ItemName
@shuveksha-tuladhar
Update styles with tailwindCSS
f9e8953
@shuveksha-tuladhar
Merge branch 'main' of https://github.com/the-collab-lab/tcl-74-smart…
d44c798 
…-shopping-list into st-tailwind
@NickRoccodev11
refactor search input, apply active styling to navlinks, debug and re…
fb01738 
…factor listpath variable
@shuveksha-tuladhar
Merge branch 'st-tailwind' of https://github.com/the-collab-lab/tcl-7…
81dc499 
…4-smart-shopping-list into st-tailwind
@shuveksha-tuladhar
style: Add gradient color to List Name disclosure, implement animatio…
0cf9888 
…n on slideup and slidedown for disclosure
@github-actions GitHub Actions
Copy link

Visit the preview URL for this PR (updated for commit 0cf9888):

https://tcl-74-smart-shopping-list--pr63-st-tailwind-jrqvzlb6.web.app

(expires Tue, 22 Oct 2024 16:51:16 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 79d73546692f99aad8468c28e36db434e2c190ac

@shuveksha-tuladhar shuveksha-tuladhar marked this pull request as ready for review October 15, 2024 16:51
@shuveksha-tuladhar shuveksha-tuladhar mentioned this pull request Oct 15, 2024
Closed
2 tasks
dterceroparker
dterceroparker approved these changes Oct 15, 2024
View reviewed changes
Copy link
Member

@dterceroparker dterceroparker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The app looks fantastic, especially in dark mode! I also had a chance to review the code, and I’m impressed by the many improvements you've made. There’s so much to learn from your approach. Thank you for taking on such a substantial task!

@shuveksha-tuladhar shuveksha-tuladhar merged commit 6630dff into main Oct 15, 2024
2 checks passed
@shuveksha-tuladhar shuveksha-tuladhar deleted the st-tailwind branch October 15, 2024 22:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dterceroparker dterceroparker dterceroparker approved these changes

@stacy-tech stacy-tech Awaiting requested review from stacy-tech

Assignees

@shuveksha-tuladhar shuveksha-tuladhar

@NickRoccodev11 NickRoccodev11

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

22. change list item to card view/ style the home page and implement tailwindCSS
3 participants
@shuveksha-tuladhar @dterceroparker @NickRoccodev11